<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作DOM</title>
	<script src="../jquery/jquery-3.3.1.js"></script>
</head>
<body>
	<ul id="test-ul">
		<li class="js">JavaScript</li>
		<li class="book">Java &amp; JavaScript</li>
	</ul>

	<!-- HTML结构 -->
	<ul id="test-css">
		<li id="js" class="lang dy"><span>JavaScript</span></li>
		<li class="lang"><span>Java</span></li>
		<li class="lang dy"><span>Python</span></li>
		<li class="lang"><span>Swift</span></li>
		<li class="lang dy"><span>Scheme</span></li>
	</ul>
<script>
	//通过jQuery获取html/文本
	let book = $("#test-ul>li.book");
	console.log(book.text());
	console.log(book.html());

	//修改
	//通过html修改
	book.html("<li><span style='color: red'>JavaScript</span></li>")
	//通过text修改文本值
	book.text("EMACScript");

	//一个Jquery对象包含0个/多个DOM对象,调用方法会影响到每个DOM节点
	let allLi = $("#test-ul>li");
	allLi.text("Python");

	//通过JQuery这样的特性可以操作一个节点来控制多有的节点，即使未获取到任何Jquery对象也不会报错
	//Jquery对象为我们免去了很多if语句

	//通过jquery批量操作的特点来修改Css
	// let alldy = $("#test-css li.dy span");
	// alldy.css("background-color","#ffd351")
	// alldy.css("color","red");

	//Jquery对象的多有方法都返回Jquery对象这样我们就可以链式编程
	let div = $("#test-css");
	//获取属性值div.css("color")
	//设置属性值div.css("color",'red')
	//删除属性值div.css("color","");

	//var div = $('#test-div');
	//div.hasClass('highlight'); // false， class是否包含highlight
	//div.addClass('highlight'); // 添加highlight这个class
	//div.removeClass('highlight'); // 删除highlight这个class

	//高亮显示JavaScript
	let js = $("#test-css>li#js>span");
	console.log(js.text());
	js.addClass("highlight");

	//显示和隐藏dom
	js.hide();
	js.show();

	//利用Jquery对象的若干方法我们可以直接获取DOM的高度宽度,无需针对特定浏览器编程'
	//浏览器可视窗口
	let width = $(window).width();
	console.log("width:" + width);
	let height = $(window).height();
	console.log("height:" + height);

	//html文档大小
	console.log("html.width:" +$(document).width());
	console.log("html.heigh:" +$(document).height());

	//attr() 和 reomveAttr()可以操作dom节点的属性
	//和attr方法类似的还有prop
	//对于属性checked的处理 attr返回checked prop返回true/false
	//is方法更好 is(":checked") true

	//对于表单的处理提供了 val 来处理值
</script>
</body>
</html>